<template>
  <div>    
      <el-form :model="query">
        <el-form-item >
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="值" prop="spec_value"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>      

    <el-dialog title="添加值" :visible.sync="addVisible" append-to-body>    
      <addvalue :specId="specId" @success="addSuccess"/>        
    </el-dialog>

    <el-dialog title="编辑值" :visible.sync="editVisible" append-to-body>
      <editvalue :row="curRow" @success="editSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import {allval,removeVal} from "@/api/shop/spec.js"
import addvalue from "./addvalue"
import editvalue from "./editvalue"

  export default {
    props:[
      'specId'
    ],
    watch:{
      specId:{
        handler:function(val){
          console.log("specId",val);
          this.query.id = val;
          this.getData();
        },
        immediate:true,
      }
    },
    components:{
      addvalue,
      editvalue,
    },
    data(){
      return {
        query:{
          id:'',
        },
        dataList:[],
        addVisible:false,
        editVisible:false,
        curRow:{}
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){
        allval(this.query.id).then(res=>{          
          this.dataList = res;
        })
      },      
      add(){
        this.addVisible = true;
      },
      addSuccess(){
        this.addVisible = false;
        this.getData();
      },
      edit(row){
        this.editVisible = true;
        this.curRow = row;
      },
      editSuccess(){
        this.editVisible = false;
      },
      del(row){
        this.$confirm("确定要删除该项吗?",'提示',{}).then(()=>{
          removeVal(row.id).then(()=>{
            this.$message.success("删除成功")
            this.getData();
          })
        }).catch(()=>{
          console.log("取消了")
        })
      }
    }
  }
</script>

<style scoped>

</style>